<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>react native 样式 | 机器人的博客</title>
  <meta name="keywords" content=" react native , 样式 ">
  <meta name="description" content="react native 样式 | 机器人的博客">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="页面未找到！">
<meta property="og:type" content="website">
<meta property="og:title" content="404">
<meta property="og:url" content="http://ancjf.com/404.html">
<meta property="og:site_name" content="机器人的博客">
<meta property="og:description" content="页面未找到！">
<meta property="og:locale" content="en_US">
<meta property="article:published_time" content="2020-04-18T07:23:22.000Z">
<meta property="article:modified_time" content="2020-04-18T07:23:50.777Z">
<meta property="article:author" content="ancjf">
<meta name="twitter:card" content="summary">


<link rel="icon" href="/img/avatar.jpg">

<link href="/css/style.css?v=1.0.1" rel="stylesheet">

<link href="/css/hl_theme/atom-light.css?v=1.0.1" rel="stylesheet">

<link href="//cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
<link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="/js/jquery.autocomplete.min.js?v=1.0.1" ></script>

<script src="//cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>
<script>
    hljs.initHighlightingOnLoad();
</script>

<script src="//cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js"></script>



<script src="//cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js" ></script>

<script src="/js/iconfont.js?v=1.0.1" ></script>

<meta name="generator" content="Hexo 4.2.0"></head>
<div style="display: none">
  <input class="theme_disqus_on" value="false">
  <input class="theme_preload_comment" value="false">
  <input class="theme_blog_path" value="">
</div>

<body>
<aside class="nav">
    <div class="nav-left">
        <a href="/" class="avatar_target">
    <img class="avatar" src="/img/avatar.jpg" />
</a>
<div class="author">
    <span>ancjf</span>
</div>

<div class="icon">
    
        
        <a title="github" href="https://github.com/ancjf" target="_blank">
            
                <svg class="iconfont-svg" aria-hidden="true">
                    <use xlink:href="#icon-github"></use>
                </svg>
            
        </a>
        
    
        
        <a title="zhihu" href="https://www.zhihu.com/people/ancjf" target="_blank">
            
                <svg class="iconfont-svg" aria-hidden="true">
                    <use xlink:href="#icon-zhihu"></use>
                </svg>
            
        </a>
        
    
        
        <a title="csdn" href="http://blog.csdn.net/ancjf" target="_blank">
            
                <svg class="iconfont-svg" aria-hidden="true">
                    <use xlink:href="#icon-csdn"></use>
                </svg>
            
        </a>
        
    
        
        <a title="email" href="mailto:ancjf@163.com" target="_blank">
            
                <svg class="iconfont-svg" aria-hidden="true">
                    <use xlink:href="#icon-email"></use>
                </svg>
            
        </a>
        
    
        
        <a title="qq" href="http://wpa.qq.com/msgrd?v=3&uin=156715133&site=qq&menu=yes" target="_blank">
            
                <svg class="iconfont-svg" aria-hidden="true">
                    <use xlink:href="#icon-qq"></use>
                </svg>
            
        </a>
        
    
</div>




<ul>
    <li><div class="all active">全部文章<small>(26)</small></div></li>
    
        
            
            <li><div data-rel="linux">linux<small>(12)</small></div>
                
            </li>
            
        
    
        
            
            <li><div data-rel="区块链">区块链<small>(8)</small></div>
                
            </li>
            
        
    
        
            
            <li><div data-rel="c++">c++<small>(4)</small></div>
                
            </li>
            
        
    
        
            
            <li><div data-rel="react native">react native<small>(2)</small></div>
                
            </li>
            
        
    
</ul>
<div class="left-bottom">
    <div class="menus">
    
    
    
    
    </div>
    <div><a class="about  hasFriend  site_url"  href="/about">关于</a><a style="width: 50%"  class="friends">友链</a></div>
</div>
<input type="hidden" id="yelog_site_posts_number" value="26">

<div style="display: none">
    <span id="busuanzi_value_site_uv"></span>
    <span id="busuanzi_value_site_pv"></span>
</div>

    </div>
    <div class="nav-right">
        <div class="friends-area">
    <div class="friends-title">
        友情链接
        <i class="back-title-list"></i>
    </div>
    <div class="friends-content">
        <ul>
            
            <li><a target="_blank" href="http://yelog.org/">叶落阁</a></li>
            
        </ul>
    </div>
</div>
        <div class="title-list">
    <form onkeydown="if(event.keyCode === 13){return false;}">
        <input id="local-search-input" class="search" type="text" placeholder="Search..." />
        <i class="cross"></i>
        <span>
            <label for="tagswitch">Tags:</label>
            <input id="tagswitch" type="checkbox" style="display: none" />
            <i id="tagsWitchIcon"></i>
        </span>
    </form>
    <div class="tags-list">
    
    <li class="article-tag-list-item">
        <a class="color1">linux</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">内存管理</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">伙伴系统</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">内存分配</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">内存释放</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color3">伙伴系统初始化</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">Slab</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color4">EOS</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color3">节点</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">数据备份</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color4">c语言</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color1">二分法查找</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">geth</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color2">私有网络搭建</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color4">以太坊</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color4">c++</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color4">rpc</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">code-push</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color3">react native</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color3">样式</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color4">调试宏</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color3">DPRINTF</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color2">DERROR</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">PERR</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">gbk2312，拼音表，排好</a>
    </li>
    
    <div class="clearfix"></div>
</div>

    
    <nav id="title-list-nav">
        
        <a id="top" class="区块链 "
           href="/2018/09/29/EOS-%E8%8A%82%E7%82%B9%E6%95%B0%E6%8D%AE%E5%A4%87%E4%BB%BD/"
           data-tag="EOS,节点,数据备份"
           data-author="" >
            <span class="post-title" title="EOS 节点数据备份">EOS 节点数据备份</span>
            <span class="post-date" title="2018-09-29 21:51:16">2018/09/29</span>
        </a>
        
        <a id="top" class="区块链 "
           href="/2018/07/29/%E4%BB%A5%E5%A4%AA%E5%9D%8A/"
           data-tag="以太坊"
           data-author="" >
            <span class="post-title" title="以太坊">以太坊</span>
            <span class="post-date" title="2018-07-29 20:50:06">2018/07/29</span>
        </a>
        
        <a id="top" class="linux "
           href="/2013/05/18/linux-3-4-10-%E5%86%85%E6%A0%B8%E5%86%85%E5%AD%98%E7%AE%A1%E7%90%86%E6%BA%90%E4%BB%A3%E7%A0%81%E5%88%86%E6%9E%901%EF%BC%9A%E6%BA%90%E4%BB%A3%E7%A0%81%E9%98%85%E8%AF%BB%E5%B7%A5%E5%85%B7%EF%BC%8C%E7%BC%96%E8%AF%91%E5%8F%8A%E8%B0%83%E8%AF%95/"
           data-tag="linux,内存管理"
           data-author="" >
            <span class="post-title" title="linux 源代码分析1:源代码阅读工具，编译及调试">linux 源代码分析1:源代码阅读工具，编译及调试</span>
            <span class="post-date" title="2013-05-18 10:18:17">2013/05/18</span>
        </a>
        
        <a id="top" class="linux "
           href="/2013/05/19/linux-3-4-10-%E5%86%85%E6%A0%B8%E5%86%85%E5%AD%98%E7%AE%A1%E7%90%86%E6%BA%90%E4%BB%A3%E7%A0%81%E5%88%86%E6%9E%902%EF%BC%9A%E4%BC%99%E4%BC%B4%E7%B3%BB%E7%BB%9F/"
           data-tag="linux,内存管理,伙伴系统"
           data-author="" >
            <span class="post-title" title="linux 源代码分析2:伙伴系统">linux 源代码分析2:伙伴系统</span>
            <span class="post-date" title="2013-05-19 11:08:56">2013/05/19</span>
        </a>
        
        <a id="top" class="linux "
           href="/2013/05/20/linux-3-4-10-%E5%86%85%E6%A0%B8%E5%86%85%E5%AD%98%E7%AE%A1%E7%90%86%E6%BA%90%E4%BB%A3%E7%A0%81%E5%88%86%E6%9E%903-%E4%BC%99%E4%BC%B4%E7%B3%BB%E7%BB%9F%E5%86%85%E5%AD%98%E5%88%86%E9%85%8D/"
           data-tag="linux,内存管理,伙伴系统,内存分配"
           data-author="" >
            <span class="post-title" title="linux 源代码分析3:伙伴系统内存分配">linux 源代码分析3:伙伴系统内存分配</span>
            <span class="post-date" title="2013-05-20 19:29:04">2013/05/20</span>
        </a>
        
        <a id="top" class="linux "
           href="/2013/05/21/linux-3-4-10-%E5%86%85%E6%A0%B8%E5%86%85%E5%AD%98%E7%AE%A1%E7%90%86%E6%BA%90%E4%BB%A3%E7%A0%81%E5%88%86%E6%9E%904-%E4%BC%99%E4%BC%B4%E7%B3%BB%E7%BB%9F%E5%86%85%E5%AD%98%E9%87%8A%E6%94%BE/"
           data-tag="linux,内存管理,伙伴系统,内存释放"
           data-author="" >
            <span class="post-title" title="linux 源代码分析4:伙伴系统内存释放">linux 源代码分析4:伙伴系统内存释放</span>
            <span class="post-date" title="2013-05-21 20:25:33">2013/05/21</span>
        </a>
        
        <a id="top" class="linux "
           href="/2013/05/22/linux-3-4-10-%E5%86%85%E6%A0%B8%E5%86%85%E5%AD%98%E7%AE%A1%E7%90%86%E6%BA%90%E4%BB%A3%E7%A0%81%E5%88%86%E6%9E%905-%E4%BC%99%E4%BC%B4%E7%B3%BB%E7%BB%9F%E5%88%9D%E5%A7%8B%E5%8C%96/"
           data-tag="linux,内存管理,伙伴系统,伙伴系统初始化"
           data-author="" >
            <span class="post-title" title="linux 源代码分析5:伙伴系统初始化">linux 源代码分析5:伙伴系统初始化</span>
            <span class="post-date" title="2013-05-22 21:59:15">2013/05/22</span>
        </a>
        
        <a id="top" class="linux "
           href="/2013/06/03/linux-3-4-10-%E5%86%85%E6%A0%B8%E5%86%85%E5%AD%98%E7%AE%A1%E7%90%86%E6%BA%90%E4%BB%A3%E7%A0%81%E5%88%86%E6%9E%906-Slab%E5%88%86%E9%85%8D%E5%99%A8/"
           data-tag="linux,内存管理,伙伴系统,Slab"
           data-author="" >
            <span class="post-title" title="linux 源代码分析6:Slab分配器">linux 源代码分析6:Slab分配器</span>
            <span class="post-date" title="2013-06-03 19:28:59">2013/06/03</span>
        </a>
        
        <a id="top" class="linux "
           href="/2013/06/05/linux-3-4-10-%E5%86%85%E6%A0%B8%E5%86%85%E5%AD%98%E7%AE%A1%E7%90%86%E6%BA%90%E4%BB%A3%E7%A0%81%E5%88%86%E6%9E%907-Slab%E5%9D%97%E7%9A%84%E7%AE%A1%E7%90%86/"
           data-tag="linux,内存管理,伙伴系统,Slab"
           data-author="" >
            <span class="post-title" title="linux 源代码分析7:Slab块的管理">linux 源代码分析7:Slab块的管理</span>
            <span class="post-date" title="2013-06-05 20:56:05">2013/06/05</span>
        </a>
        
        <a id="top" class="linux "
           href="/2013/06/04/linux-3-4-10-%E5%86%85%E6%A0%B8%E5%86%85%E5%AD%98%E7%AE%A1%E7%90%86%E6%BA%90%E4%BB%A3%E7%A0%81%E5%88%86%E6%9E%908-Slab%E5%86%85%E5%AD%98%E5%88%86%E9%85%8D/"
           data-tag="linux,内存管理,伙伴系统,Slab"
           data-author="" >
            <span class="post-title" title="linux 源代码分析8:Slab内存分配">linux 源代码分析8:Slab内存分配</span>
            <span class="post-date" title="2013-06-04 19:47:29">2013/06/04</span>
        </a>
        
        <a id="top" class="linux "
           href="/2013/06/09/linux-3-4-10-%E5%86%85%E6%A0%B8%E5%86%85%E5%AD%98%E7%AE%A1%E7%90%86%E6%BA%90%E4%BB%A3%E7%A0%81%E5%88%86%E6%9E%909-Slab%E5%86%85%E5%AD%98%E9%87%8A%E6%94%BE/"
           data-tag="linux,内存管理,伙伴系统,Slab"
           data-author="" >
            <span class="post-title" title="linux 源代码分析9:Slab内存释放">linux 源代码分析9:Slab内存释放</span>
            <span class="post-date" title="2013-06-09 20:17:42">2013/06/09</span>
        </a>
        
        <a id="top" class="linux "
           href="/2013/06/09/linux-3-4-10-%E5%86%85%E6%A0%B8%E5%86%85%E5%AD%98%E7%AE%A1%E7%90%86%E6%BA%90%E4%BB%A3%E7%A0%81%E5%88%86%E6%9E%9010-slab%E9%80%9A%E7%94%A8%E9%95%BF%E5%BA%A6%E5%86%85%E5%AD%98%E5%88%86%E9%85%8D/"
           data-tag="linux,内存管理,伙伴系统,Slab"
           data-author="" >
            <span class="post-title" title="linux 源代码分析10:slab通用长度内存分配">linux 源代码分析10:slab通用长度内存分配</span>
            <span class="post-date" title="2013-06-09 20:17:42">2013/06/09</span>
        </a>
        
        <a id="top" class="linux "
           href="/2013/06/12/linux-3-4-10-%E5%86%85%E6%A0%B8%E5%86%85%E5%AD%98%E7%AE%A1%E7%90%86%E6%BA%90%E4%BB%A3%E7%A0%81%E5%88%86%E6%9E%9011-Slab%E5%88%9D%E5%A7%8B%E5%8C%96/"
           data-tag="linux,内存管理,伙伴系统,Slab"
           data-author="" >
            <span class="post-title" title="linux 源代码分析11:Slab初始化">linux 源代码分析11:Slab初始化</span>
            <span class="post-date" title="2013-06-12 19:43:06">2013/06/12</span>
        </a>
        
        <a id="top" class="区块链 "
           href="/2020/03/29/ok6410-u-boot-dm9000-%E9%A9%B1%E5%8A%A8%E8%A1%A5%E4%B8%81-patch/"
           data-tag=""
           data-author="" >
            <span class="post-title" title="ok6410 u-boot dm9000 驱动补丁 patch">ok6410 u-boot dm9000 驱动补丁 patch</span>
            <span class="post-date" title="2020-03-29 21:58:09">2020/03/29</span>
        </a>
        
        <a id="top" class="区块链 "
           href="/2020/03/29/eostoolkit-%E5%AE%89%E8%A3%85/"
           data-tag=""
           data-author="" >
            <span class="post-title" title="eostoolkit 安装">eostoolkit 安装</span>
            <span class="post-date" title="2020-03-29 21:58:09">2020/03/29</span>
        </a>
        
        <a id="top" class="linux "
           href="/2020/03/29/sdl2-%E5%92%8C-dmalloc-%E4%B8%8D%E5%85%BC%E5%AE%B9/"
           data-tag=""
           data-author="" >
            <span class="post-title" title="sdl2 和 dmalloc 不兼容">sdl2 和 dmalloc 不兼容</span>
            <span class="post-date" title="2020-03-29 21:58:09">2020/03/29</span>
        </a>
        
        <a id="top" class="区块链 "
           href="/2018/07/29/bitcoin-%E6%B5%8B%E8%AF%95%E7%BD%91%E7%BB%9C/"
           data-tag=""
           data-author="" >
            <span class="post-title" title="bitcoin 测试网络">bitcoin 测试网络</span>
            <span class="post-date" title="2018-07-29 20:50:06">2018/07/29</span>
        </a>
        
        <a id="top" class="区块链 "
           href="/2018/07/29/USDT%E9%92%B1%E5%8C%85%E5%BD%92%E9%9B%86/"
           data-tag=""
           data-author="" >
            <span class="post-title" title="USDT钱包归集">USDT钱包归集</span>
            <span class="post-date" title="2018-07-29 20:50:06">2018/07/29</span>
        </a>
        
        <a id="top" class="c++ "
           href="/2012/10/24/%E8%B0%83%E8%AF%95%E5%AE%8F-DPRINTF-DERROR-PERR/"
           data-tag="调试宏,DPRINTF,DERROR,PERR"
           data-author="" >
            <span class="post-title" title="调试宏 DPRINTF DERROR PERR">调试宏 DPRINTF DERROR PERR</span>
            <span class="post-date" title="2012-10-24 17:38:38">2012/10/24</span>
        </a>
        
        <a id="top" class="区块链 "
           href="/2018/08/29/%E6%AF%94%E7%89%B9%E5%B8%81%E5%AE%A2%E6%88%B7%E7%AB%AFbitcoind%E7%9A%84%E9%AB%98%E7%BA%A7%E7%94%A8%E6%B3%95/"
           data-tag=""
           data-author="" >
            <span class="post-title" title="比特币客户端bitcoind的高级用法">比特币客户端bitcoind的高级用法</span>
            <span class="post-date" title="2018-08-29 20:51:09">2018/08/29</span>
        </a>
        
        <a id="top" class="区块链 "
           href="/2016/11/23/geth%E7%A7%81%E6%9C%89%E7%BD%91%E7%BB%9C%E6%90%AD%E5%BB%BA/"
           data-tag="geth,私有网络搭建"
           data-author="" >
            <span class="post-title" title="geth私有网络搭建">geth私有网络搭建</span>
            <span class="post-date" title="2016-11-23 17:51:36">2016/11/23</span>
        </a>
        
        <a  class="react native "
           href="/2020/09/15/react-native-%E6%A0%B7%E5%BC%8F/"
           data-tag="react native,样式"
           data-author="" >
            <span class="post-title" title="react native 样式">react native 样式</span>
            <span class="post-date" title="2020-09-15 08:58:46">2020/09/15</span>
        </a>
        
        <a  class="c++ "
           href="/2020/09/15/c%E8%AF%AD%E8%A8%80-%E4%BA%8C%E5%88%86%E6%B3%95%E6%9F%A5%E6%89%BE/"
           data-tag="c语言,二分法查找"
           data-author="" >
            <span class="post-title" title="c语言 二分法查找">c语言 二分法查找</span>
            <span class="post-date" title="2020-09-15 08:51:53">2020/09/15</span>
        </a>
        
        <a  class="react native "
           href="/2020/05/19/code-push%E4%BD%BF%E7%94%A8%E8%AE%B0%E5%BD%95/"
           data-tag="code-push"
           data-author="" >
            <span class="post-title" title="code-push使用记录">code-push使用记录</span>
            <span class="post-date" title="2020-05-19 16:54:53">2020/05/19</span>
        </a>
        
        <a  class="c++ "
           href="/2018/09/15/%E4%BB%A5%E5%A4%AA%E5%9D%8Ac++%E7%89%88%E6%9C%ACrpc%E6%8E%A5%E5%8F%A3%E6%B7%BB%E5%8A%A0/"
           data-tag="以太坊,c++,rpc"
           data-author="" >
            <span class="post-title" title="以太坊c++版本rpc接口添加">以太坊c++版本rpc接口添加</span>
            <span class="post-date" title="2018-09-15 16:06:05">2018/09/15</span>
        </a>
        
        <a  class="c++ "
           href="/2011/04/28/gbk2312%E6%8B%BC%E9%9F%B3%E8%A1%A8-%E6%8C%89%E8%AF%8D%E9%A2%91%E6%8E%92%E5%A5%BD%E5%BA%8F%E7%9A%84/"
           data-tag="gbk2312，拼音表，排好"
           data-author="" >
            <span class="post-title" title="gbk2312拼音表 按词频排好序的">gbk2312拼音表 按词频排好序的</span>
            <span class="post-date" title="2011-04-28 11:21:00">2011/04/28</span>
        </a>
        
    </nav>
</div>
    </div>
    <div class="hide-list">
        <div class="semicircle">
            <div class="brackets first"><</div>
            <div class="brackets">&gt;</div>
        </div>
    </div>
</aside>
<div class="post">
    <div class="pjax">
        <article id="post-react-native-样式" class="article article-type-post" itemscope itemprop="blogPost">
    
        <h1 class="article-title">react native 样式</h1>
    
    <div class="article-meta">
        
        
        
        <span class="book">
            
                <a  data-rel="react native">react native</a>
            
        </span>
        
        
        <span class="tag">
            
            <a class="color3">react native</a>
            
            <a class="color3">样式</a>
            
        </span>
        
    </div>
    <div class="article-meta">
        
        创建时间:<time class="date" title='更新时间: 2020-09-15 09:02:29'>2020-09-15 08:58</time>
        
    </div>
    <div class="article-meta">
        
        
        <span id="busuanzi_container_page_pv">
            阅读:<span id="busuanzi_value_page_pv">
                <span class="count-comment">
                    <span class="spinner">
                      <div class="cube1"></div>
                      <div class="cube2"></div>
                    </span>
                </span>
            </span>
        </span>
        
        
    </div>
    
    <div class="toc-ref">
    
        <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#alignItems"><span class="toc-text">alignItems</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#alignSelf"><span class="toc-text">alignSelf</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#backgroundColor"><span class="toc-text">backgroundColor</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#borderColor"><span class="toc-text">borderColor</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#borderStyle"><span class="toc-text">borderStyle</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#flex"><span class="toc-text">flex</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#font"><span class="toc-text">font</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#margin"><span class="toc-text">margin</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#padding"><span class="toc-text">padding</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#position"><span class="toc-text">position</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#“textAlign”-文本对齐方式"><span class="toc-text">“textAlign”,文本对齐方式</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#transform"><span class="toc-text">transform</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#FlexStyle"><span class="toc-text">FlexStyle</span></a></li></ol>
    
<style>
    .left-col .switch-btn,
    .left-col .switch-area {
        display: none;
    }
    .toc-level-3 i,
    .toc-level-3 ol {
        display: none !important;
    }
</style>
</div>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h1 id="alignItems"><a href="#alignItems" class="headerlink" title="alignItems"></a>alignItems</h1><pre><code>&quot;alignItems&quot;,居中对齐弹性盒的各项 &lt;div&gt; 元素
 例：alignItems:&apos;center&apos;,
 -&gt; stretch(项目被拉伸以适应容器)
 -&gt; center(项目位于容器的中心)
 -&gt; flex-start(项目位于容器的开头)
 -&gt; flex-end(项目位于容器的结尾)
 -&gt; baseline(项目位于容器的基线上)
 -&gt; initial(设置该属性为它的默认值)
 -&gt; inherit(从父元素继承该属性)</code></pre><h1 id="alignSelf"><a href="#alignSelf" class="headerlink" title="alignSelf"></a>alignSelf</h1><pre><code>&quot;alignSelf&quot;,居中对齐弹性对象元素内的某个项
例：alignSelf:&apos;center&apos;,
-&gt; auto(默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 &quot;stretch&quot;)
-&gt; stretch(项目被拉伸以适应容器)
-&gt; center(项目位于容器的中心)
-&gt; flex-start(项目位于容器的开头)
-&gt; flex-end(项目位于容器的结尾)
-&gt; baseline(项目位于容器的基线上)
-&gt; initial(设置该属性为它的默认值)
-&gt; inherit(从父元素继承该属性)

&quot;backfaceVisibility&quot;,当元素不面向屏幕时是否可见
例：backfaceVisibility:&apos;visible&apos;
-&gt; visible (背面是可见的)
-&gt; hidden  (背面是不可见的)</code></pre><h1 id="backgroundColor"><a href="#backgroundColor" class="headerlink" title="backgroundColor"></a>backgroundColor</h1><pre><code>&quot;backgroundColor&quot;,背景色
例：backgroundColor:&apos;red&apos;
例：backgroundColor:&apos;#cccccc&apos;
-&gt; color   (指定背景颜色。在CSS颜色值近可能的寻找一个颜色值的完整列表)
-&gt; transparent (指定背景颜色应该是透明的。这是默认)
-&gt; inherit (指定背景颜色，应该从父元素继承)</code></pre><h1 id="borderColor"><a href="#borderColor" class="headerlink" title="borderColor"></a>borderColor</h1><pre><code>&quot;borderColor&quot;,四个边框颜色
 例：borderColor:&apos;#00ff00&apos;

 &quot;borderLeftColor&quot;,左边框颜色
 例：borderLeftColor:&apos;yellow&apos;

&quot;borderRightColor&quot;,右边框颜色
 例：例：borderRightColor:&apos;yellow&apos;

 &quot;borderBottomColor&quot;,底部边框颜色
 例：borderBottomColor:&apos;red&apos;
 例：borderBottomColor:&apos;#cccccc&apos;
 -&gt; color   (指定背景颜色。在CSS 颜色值 查找颜色值的完整列表)
 -&gt; transparent (指定边框的颜色应该是透明的。这是默认)
 - &gt;inherit (指定边框的颜色，应该从父元素继承)

 &quot;borderBottomLeftRadius&quot;,左下角添加圆角边框
 例：borderBottomLeftRadius:10

 &quot;borderBottomRightRadius&quot;,右下角添加圆角边框
 例：borderBottomRightRadius:10

 &quot;borderBottomWidth&quot;,底部边框宽度
 例：borderBottomWidth:8

 &quot;borderLeftWidth&quot;,左边框宽度
 例：borderLeftWidth:10

 &quot;borderRadius&quot;,四角圆角弧度
 例：borderRadius:15



 &quot;borderRightWidth&quot;,右边框宽度
 例：borderRightWidth:10</code></pre><h1 id="borderStyle"><a href="#borderStyle" class="headerlink" title="borderStyle"></a>borderStyle</h1><pre><code>&quot;borderStyle&quot;,四个边框的样式
例：borderStyle:&apos;dotted&apos;
-&gt; none    定义无边框。
-&gt; hidden  与 &quot;none&quot; 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
-&gt; dotted  定义点状边框。在大多数浏览器中呈现为实线。
-&gt; dashed  定义虚线。在大多数浏览器中呈现为实线。
-&gt; solid   定义实线。
-&gt; double  定义双线。双线的宽度等于 border-width 的值。
-&gt; groove  定义 3D 凹槽边框。其效果取决于 border-color 的值。
-&gt; ridge   定义 3D 垄状边框。其效果取决于 border-color 的值。
-&gt; inset   定义 3D inset 边框。其效果取决于 border-color 的值。
-&gt; outset  定义 3D outset 边框。其效果取决于 border-color 的值。
-&gt; inherit 规定应该从父元素继承边框样式。

&quot;borderTopColor&quot;,上边框颜色
例：borderTopColor：&apos;red&apos;

&quot;borderTopLeftRadius&quot;,左上角圆角弧度
例：borderTopLeftRadius：3

&quot;borderTopRightRadius&quot;,右上角圆角弧度
例：borderTopRightRadius：4

&quot;borderTopWidth&quot;,顶部边框宽度
例：borderTopWidth：13

&quot;borderWidth&quot;,四个边框的宽度
例：borderWidth：2

&quot;bottom&quot;,图像的底部边缘
例：bottom:20

&quot;color&quot;,颜色
例：color:&apos;red&apos;

&quot;elevation&quot;,Z轴，可产生立体效果
例：elevation:1</code></pre><h1 id="flex"><a href="#flex" class="headerlink" title="flex"></a>flex</h1><pre><code> &quot;flex&quot;,让所有弹性盒模型对象的子元素都有相同的长度，忽略它们内部的内容

例：flex:1

 &quot;flexDirection&quot;,设置 &lt;div&gt; 元素内弹性盒元素的方向为相反的顺序
 例：flexDirection:&apos;column&apos;
 -&gt; row ((默认值。灵活的项目将水平显示，正如一个行一样)
 -&gt; row-reverse (与 row 相同，但是以相反的顺序)
 -&gt; column  (灵活的项目将垂直显示，正如一个列一样)
 -&gt; column-reverse  (与 column 相同，但是以相反的顺序)
 -&gt; initial (设置该属性为它的默认值。请参阅 initial)
 -&gt; inherit (从父元素继承该属性。请参阅 inherit)

 &quot;flexWrap&quot;,让弹性盒元素在必要的时候拆行
 例：flexWrap:&apos;wrap&apos;
 -&gt; nowrap  (默认值。规定灵活的项目不拆行或不拆列)
 -&gt; wrap    (规定灵活的项目在必要的时候拆行或拆列)
 -&gt; wrap-reverse    (规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序)
 -&gt; initial (设置该属性为它的默认值。请参阅 initial)
 -&gt; inherit (从父元素继承该属性。请参阅 inherit)</code></pre><h1 id="font"><a href="#font" class="headerlink" title="font"></a>font</h1><pre><code>&quot;fontFamily&quot;,字体
例：fontFamily:&apos;courier&apos;

&quot;fontSize&quot;,字体大小
例：fontSize:20

&quot;fontStyle&quot;,
例：fontStyle:&apos;italic&apos;
-&gt; normal  默认值。浏览器显示一个标准的字体样式。
-&gt; italic  浏览器会显示一个斜体的字体样式。
-&gt; oblique 浏览器会显示一个倾斜的字体样式

&quot;fontWeight&quot;,文本的粗细
例：fontWeight:&apos;bold&apos;
-&gt; normal  (默认值。定义标准的字符)
-&gt; bold    (定义粗体字符)
-&gt; bolder  (定义更粗的字符)
-&gt; lighter (定义更细的字符)
-&gt; 100    (定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold)
-&gt; 200
-&gt; 300
-&gt; 400
-&gt; 500
-&gt; 600
-&gt; 700
-&gt; 800
-&gt; 900

&quot;height&quot;,设置元素的高度
例：height:200

&quot;justifyContent&quot;,在弹性盒对象的元素中的各项周围留有空白
例：justifyContent:&apos;space-between&apos;
-&gt; flex-start  (默认值。项目位于容器的开头)
-&gt; flex-end    (项目位于容器的结尾)
-&gt; center  (项目位于容器的中心)
-&gt; space-between   (项目位于各行之间留有空白的容器内)
-&gt; space-around    (项目位于各行之前、之间、之后都留有空白的容器内)

&quot;left&quot;,把图像的左边缘设置在其包含元素左边缘向右5像素的位置
例：left:20

&quot;letterSpacing&quot;,字母间距
例：letterSpacing:20

&quot;lineHeight&quot;,行高
例：lineHeight:30</code></pre><h1 id="margin"><a href="#margin" class="headerlink" title="margin"></a>margin</h1><pre><code>&quot;margin&quot;,元素的所有四个边距
例：

&quot;marginBottom&quot;,下边距
例：marginBottom:50

&quot;marginHorizontal&quot;,水平间距，即左边距和右边距
例：marginHorizontal:10

&quot;marginLeft&quot;,左边距
例：marginLeft:50

&quot;marginRight&quot;,右边距
例：marginRight:50

&quot;marginTop&quot;,上边距
例：marginTop:50

&quot;marginVertical&quot;,垂直间距，即上边距和下边距
例：marginVertical:10

&quot;opacity&quot;,透明度级别
例：opacity：0.5

&quot;overflow&quot;,设置overflow属性进行滚动
例：overflow:&apos;hidden&apos;
visible    (默认值。内容不会被修剪，会呈现在元素框之外)
hidden (内容会被修剪，并且其余内容是不可见的)
scroll (内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容)

&quot;overlayColor&quot;,
例：</code></pre><h1 id="padding"><a href="#padding" class="headerlink" title="padding"></a>padding</h1><pre><code>&quot;padding&quot;,填充
例：

&quot;paddingBottom&quot;,下填充
例：

&quot;paddingHorizontal&quot;,左右填充
例：

&quot;paddingLeft&quot;,左填充
例：

&quot;paddingRight&quot;,右填充
例：

&quot;paddingTop&quot;,上填充
例：

&quot;paddingVertical&quot;,上下填充
例：</code></pre><h1 id="position"><a href="#position" class="headerlink" title="position"></a>position</h1><pre><code>&quot;position&quot;,定位
例：position:&apos;fixed&apos;
-&gt; absolute    生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 &quot;left&quot;, &quot;top&quot;, &quot;right&quot; 以及 &quot;bottom&quot; 属性进行规定。
-&gt; fixed       生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 &quot;left&quot;, &quot;top&quot;, &quot;right&quot; 以及 &quot;bottom&quot; 属性进行规定。
-&gt; relative    生成相对定位的元素，相对于其正常位置进行定位。因此，&quot;left:20&quot; 会向元素的 LEFT 位置添加 20 像素。
-&gt; static      默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）

&quot;resizeMode&quot;,用户调整大小
例：resizeMode:&apos;cover&apos;
-&gt; cover    等比拉伸
-&gt; strech   保持原有大小
-&gt; contain  图片拉伸  充满空间

&quot;right&quot;,把图像的右边缘设置在其包含元素右边缘向左 5 像素的位置
例：right:5

&quot;rotation&quot;,元素旋转
例：rotation：180

&quot;scaleX&quot;,
例：

&quot;scaleY&quot;,
例：

&quot;shadowColor&quot;,
例：

&quot;shadowOffset&quot;,
例：

&quot;shadowOpacity&quot;,
例：

&quot;shadowRadius&quot;,
例：</code></pre><h1 id="“textAlign”-文本对齐方式"><a href="#“textAlign”-文本对齐方式" class="headerlink" title="“textAlign”,文本对齐方式"></a>“textAlign”,文本对齐方式</h1><pre><code> 例：textAlign:&apos;left&apos;
 -&gt; left    把文本排列到左边。默认值：由浏览器决定。
 -&gt; right   把文本排列到右边。
 -&gt; center  把文本排列到中间。
 -&gt; justify 实现两端对齐文本效果

textAlign
 &quot;textAlignVertical&quot;,
 例：

 &quot;textDecorationColor&quot;,下划线文本中下划线的颜色
 例：textDecorationColor:&apos;red&apos;

 &quot;textDecorationLine&quot;,显示一条线
 例：textDecorationLine:&apos;underline&apos;
 -&gt; none            默认值。规定文本修饰没有线条。 测试 »
 -&gt; underline       规定文本的下方将显示一条线。  测试 »
 -&gt; overline        规定文本的上方将显示一条线。  测试 »
 -&gt; line-through    规定文本的中间将显示一条线

 &quot;textDecorationStyle&quot;,显示一条线的样式
 例：textDecorationStyle:&apos;solid&apos;
 -&gt; solid   默认值。线条将显示为单线。
 -&gt; double  线条将显示为双线。
 -&gt; dotted  线条将显示为点状线。
 -&gt; dashed  线条将显示为虚线。
 -&gt; wavy    线条将显示为波浪线

 &quot;textShadowColor&quot;,文字阴影颜色
 例：textShadowColor：&apos;red&apos;

 &quot;textShadowOffset&quot;,文字阴影偏移量
 例：textShadowOffset:2

 &quot;textShadowRadius&quot;,文字阴影圆角
 例：textShadowRadius:3

 &quot;tintColor&quot;,
 例：

 &quot;top&quot;,上
 例：</code></pre><h1 id="transform"><a href="#transform" class="headerlink" title="transform"></a>transform</h1><pre><code>&quot;transform&quot;,旋转
例：
none   定义不进行转换。
matrix(n,n,n,n,n,n)    定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)  定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。
translateX(x)  定义转换，只是用 X 轴的值。
translateY(y)  定义转换，只是用 Y 轴的值。
translateZ(z)  定义 3D 转换，只是用 Z 轴的值。
scale(x[,y]?)  定义 2D 缩放转换。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x)  通过设置 X 轴的值来定义缩放转换。
scaleY(y)  通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)  通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)  定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)  定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。    测试
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)  定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)   定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)   定义沿着 Y 轴的 2D 倾斜转换。
perspective(n) 为 3D 转换元素定义透视视图

&quot;translateX&quot;,
例：

&quot;translateY&quot;,
例：

&quot;width&quot;,宽
例：

&quot;writingDirection&quot;文本方向
 auto’,’ltr’,’rtl</code></pre><h1 id="FlexStyle"><a href="#FlexStyle" class="headerlink" title="FlexStyle"></a>FlexStyle</h1><pre><code>export interface FlexStyle {
    alignContent?: &quot;flex-start&quot; | &quot;flex-end&quot; | &quot;center&quot; | &quot;stretch&quot; | &quot;space-between&quot; | &quot;space-around&quot;;
    alignItems?: FlexAlignType;
    alignSelf?: &quot;auto&quot; | FlexAlignType;
    aspectRatio?: number;
    borderBottomWidth?: number;
    borderEndWidth?: number | string;
    borderLeftWidth?: number;
    borderRightWidth?: number;
    borderStartWidth?: number | string;
    borderTopWidth?: number;
    borderWidth?: number;
    bottom?: number | string;
    display?: &quot;none&quot; | &quot;flex&quot;;
    end?: number | string;
    flex?: number;
    flexBasis?: number | string;
    flexDirection?: &quot;row&quot; | &quot;column&quot; | &quot;row-reverse&quot; | &quot;column-reverse&quot;;
    flexGrow?: number;
    flexShrink?: number;
    flexWrap?: &quot;wrap&quot; | &quot;nowrap&quot; | &quot;wrap-reverse&quot;;
    height?: number | string;
    justifyContent?: &quot;flex-start&quot; | &quot;flex-end&quot; | &quot;center&quot; | &quot;space-between&quot; | &quot;space-around&quot; | &quot;space-evenly&quot;;
    left?: number | string;
    margin?: number | string;
    marginBottom?: number | string;
    marginEnd?: number | string;
    marginHorizontal?: number | string;
    marginLeft?: number | string;
    marginRight?: number | string;
    marginStart?: number | string;
    marginTop?: number | string;
    marginVertical?: number | string;
    maxHeight?: number | string;
    maxWidth?: number | string;
    minHeight?: number | string;
    minWidth?: number | string;
    overflow?: &quot;visible&quot; | &quot;hidden&quot; | &quot;scroll&quot;;
    padding?: number | string;
    paddingBottom?: number | string;
    paddingEnd?: number | string;
    paddingHorizontal?: number | string;
    paddingLeft?: number | string;
    paddingRight?: number | string;
    paddingStart?: number | string;
    paddingTop?: number | string;
    paddingVertical?: number | string;
    position?: &quot;absolute&quot; | &quot;relative&quot;;
    right?: number | string;
    start?: number | string;
    top?: number | string;
    width?: number | string;
    zIndex?: number;

    /**
     * @platform ios
     */
    direction?: &quot;inherit&quot; | &quot;ltr&quot; | &quot;rtl&quot;;
}</code></pre>
      
       <hr><span style="font-style: italic;color: gray;"> 转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 ancjf@163.com </span>
    </div>
</article>


<p>
    <a  class="dashang" onclick="dashangToggle()">赏</a>
</p>


<div class="article_copyright">
    <p><span class="copy-title">文章标题:</span>react native 样式</p>
    
    <p><span class="copy-title">本文作者:</span><a  title="ancjf">ancjf</a></p>
    <p><span class="copy-title">发布时间:</span>2020-09-15, 08:58:46</p>
    <p><span class="copy-title">最后更新:</span>2020-09-15, 09:02:29</p>
    <span class="copy-title">原始链接:</span><a class="post-url" href="/2020/09/15/react-native-%E6%A0%B7%E5%BC%8F/" title="react native 样式">http://ancjf.com/2020/09/15/react-native-%E6%A0%B7%E5%BC%8F/</a>
    <p>
        <span class="copy-title">版权声明:</span><i class="fa fa-creative-commons"></i> <a rel="license noopener" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" title="CC BY-NC-SA 4.0 International" target = "_blank">"署名-非商用-相同方式共享 4.0"</a> 转载请保留原文链接及作者。
    </p>
</div>





    




    </div>
    <div class="copyright">
        <p class="footer-entry">©2016-2019 Yelog</p>
<p class="footer-entry">Built with <a href="https://hexo.io/" target="_blank">Hexo</a> and <a href="https://github.com/yelog/hexo-theme-3-hexo" target="_blank">3-hexo</a> theme</p>

    </div>
    <div class="full-toc">
        <button class="full"><span class="min "></span></button>
<button class="post-toc-menu"><span class="post-toc-menu-icons"></span></button>
<div class="post-toc"><span class="post-toc-title">目录</span>
    <div class="post-toc-content">

    </div>
</div>
<a class="" id="rocket" ></a>

    </div>
</div>
<div class="acParent"></div>

<div class="hide_box" onclick="dashangToggle()"></div>
<div class="shang_box">
    <a class="shang_close"  onclick="dashangToggle()">×</a>
    <div class="shang_tit">
        <p>喜欢就点赞,疼爱就打赏</p>
    </div>
    <div class="shang_payimg">
        <div class="pay_img">
            <img src="/img/alipay.jpg" class="alipay" title="扫码支持">
            <img src="/img/weixin.jpg" class="weixin" title="扫码支持">
        </div>
    </div>
    <div class="shang_payselect">
        <span><label><input type="radio" name="pay" checked value="alipay">支付宝</label></span><span><label><input type="radio" name="pay" value="weixin">微信</label></span>
    </div>
</div>


</body>
<script src="/js/jquery.pjax.js?v=1.0.1" ></script>

<script src="/js/script.js?v=1.0.1" ></script>
<script>
    var img_resize = 'default';
    /*作者、标签的自动补全*/
    $(function () {
        $('.search').AutoComplete({
            'data': ['#linux','#内存管理','#伙伴系统','#内存分配','#内存释放','#伙伴系统初始化','#Slab','#EOS','#节点','#数据备份','#c语言','#二分法查找','#geth','#私有网络搭建','#以太坊','#c++','#rpc','#code-push','#react native','#样式','#调试宏','#DPRINTF','#DERROR','#PERR','#gbk2312，拼音表，排好',],
            'itemHeight': 20,
            'width': 418
        }).AutoComplete('show');
    })
    function initArticle() {
        /*渲染对应的表格样式*/
        
            $(".post .pjax table").addClass("green_title");
        

        /*渲染打赏样式*/
        
        $("input[name=pay]").on("click", function () {
            if($("input[name=pay]:checked").val()=="weixin"){
                $(".shang_box .shang_payimg .pay_img").addClass("weixin_img");
            } else {
                $(".shang_box .shang_payimg .pay_img").removeClass("weixin_img");
            }
        })
        

        /*高亮代码块行号*/
        
        $('pre code').each(function(){
            var lines = $(this).text().split('\n').length - 1, widther='';
            if (lines>99) {
                widther = 'widther'
            }
            var $numbering = $('<ul/>').addClass('pre-numbering ' + widther).attr("unselectable","on");
            $(this).addClass('has-numbering ' + widther)
                    .parent()
                    .append($numbering);
            for(var i=1;i<=lines;i++){
                $numbering.append($('<li/>').text(i));
            }
        });
        

        /*访问数量*/
        
        $.getScript("//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js");
        

        /*代码高亮，行号对齐*/
        $('.pre-numbering').css('line-height',$('.has-numbering').css('line-height'));

        
        
    }

    /*打赏页面隐藏与展示*/
    
    function dashangToggle() {
        $(".shang_box").fadeToggle();
        $(".hide_box").fadeToggle();
    }
    

</script>

<!--加入行号的高亮代码块样式-->

<style>
    pre{
        position: relative;
        margin-bottom: 24px;
        border-radius: 10px;
        border: 1px solid #e2dede;
        background: #FFF;
        overflow: hidden;
    }
    code.has-numbering{
        margin-left: 30px;
    }
    code.has-numbering.widther{
        margin-left: 35px;
    }
    .pre-numbering{
        margin: 0px;
        position: absolute;
        top: 0;
        left: 0;
        width: 20px;
        padding: 0.5em 3px 0.7em 5px;
        border-right: 1px solid #C3CCD0;
        text-align: right;
        color: #AAA;
        background-color: #fafafa;
    }
    .pre-numbering.widther {
        width: 35px;
    }
</style>

<!--自定义样式设置-->
<style>
    
    
    .nav {
        width: 542px;
    }
    .nav.fullscreen {
        margin-left: -542px;
    }
    .nav-left {
        width: 120px;
    }
    
    
    @media screen and (max-width: 1468px) {
        .nav {
            width: 492px;
        }
        .nav.fullscreen {
            margin-left: -492px;
        }
        .nav-left {
            width: 100px;
        }
    }
    
    
    @media screen and (max-width: 1024px) {
        .nav {
            width: 492px;
            margin-left: -492px
        }
        .nav.fullscreen {
            margin-left: 0;
        }
        .nav .hide-list.fullscreen {
            left: 492px
        }
    }
    
    @media screen and (max-width: 426px) {
        .nav {
            width: 100%;
        }
        .nav-left {
            width: 100%;
        }
    }
    
    
    .nav-right .title-list nav a .post-title, .nav-right .title-list #local-search-result a .post-title {
        color: #383636;
    }
    
    
    .nav-right .title-list nav a .post-date, .nav-right .title-list #local-search-result a .post-date {
        color: #5e5e5f;
    }
    
    
    .nav-right nav a.hover, #local-search-result a.hover{
        background-color: #e2e0e0;
    }
    
    

    /*列表样式*/
    
    .post .pjax article .article-entry>ol, .post .pjax article .article-entry>ul, .post .pjax article>ol, .post .pjax article>ul{
        border: #e2dede solid 1px;
        border-radius: 10px;
        padding: 10px 32px 10px 56px;
    }
    .post .pjax article .article-entry li>ol, .post .pjax article .article-entry li>ul,.post .pjax article li>ol, .post .pjax article li>ul{
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .post .pjax article .article-entry>ol>li, .post .pjax article .article-entry>ul>li,.post .pjax article>ol>li, .post .pjax article>ul>li{
        margin-bottom: auto;
        margin-left: auto;
    }
    .post .pjax article .article-entry li>ol>li, .post .pjax article .article-entry li>ul>li,.post .pjax article li>ol>li, .post .pjax article li>ul>li{
        margin-bottom: auto;
        margin-left: auto;
    }
    

    /* 背景图样式 */
    
    


    /*引用块样式*/
    

    /*文章列表背景图*/
    
    .nav-right:before {
        content: ' ';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0.3;
        background: url("https://i.loli.net/2019/07/22/5d3521411f3f169375.png");
        background-repeat: no-repeat;
        background-position: 50% 0;
        -ms-background-size: cover;
        -o-background-size: cover;
        -moz-background-size: cover;
        -webkit-background-size: cover;
        background-size: cover;
    }
    

    
</style>







</html>
